import { useFoodStore, addFish, removeFish } from '@/store/FoodStore'
import { shallow } from 'zustand/shallow'

export const FoodBox = () => {
  const [fish] = useFoodStore(state => [state.fish], shallow)

  const addFishFive = () => {
    useFoodStore.setState({ fish: fish + 5 })
  }

  return (
    <div className="box">
      <h1>FoodBox</h1>
      <p>fish: {fish}</p>
      <button onClick={addFishFive}>add fish 5</button>
      <button onClick={addFish}>add fish</button>
      <button onClick={removeFish}>clear storage</button>
    </div>
  )
}
